<template>
	<view class="app-container">
		<authorize @onLoadFun="onLoadFun" isGoIndex></authorize>
		<view class="list">
			<view class="row" v-for="(row, index) in addressList" :key="index" @tap="select(row)">
				<view class="left">
					<view class="head">{{ row.initial_name }}</view>
				</view>
				<view class="center">
					<view class="name-tel">
						<view class="name">{{ row.name }}</view>
						<view class="tel">{{ row.telephone }}</view>
						<view class="default" v-if="row.is_default">默认</view>
					</view>
					<view class="address">{{ row.area_group_name + row.address }}</view>
				</view>
				<view class="right text-xl"><view class="cuIcon-write text-gray" @tap.stop="edit(row)"></view></view>
			</view>
			<view class='noCommodity' v-if="!addressList.length">
			   <view class='pictrue'><image src='/static/img/noAddress.png'></image></view>
			</view>
		</view>
		<view class="add" :class="{ 'isIphoneX-class': isIphoneX }" @tap="add">
			<!-- <view class="btn" @tap="add"> -->
			<button class="form-btn cu-btn bg-primary block lg box-shadow">新增地址</button>
			<!-- </view> -->
		</view>
	</view>
</template>
<script>
import {mapGetters} from 'vuex'
import {getUserShippingAddress} from '@/api/community.js'
import authorize from '@/components/authorize/authorize';

export default {
	components: {
		authorize
	},
	data() {
		return {
			isSelect: false,
			addressList: []
		};
	},
	onShow() {
		this.getUserShippingAddressEvent()
	},
	onLoad(e) {
		if (e.type == 'select') {
			this.isSelect = true;
		}
	},
	computed: {
		...mapGetters(['isIphoneX'])
	},
	onPullDownRefresh() {
		this.getUserShippingAddressEvent();
	},
	methods: {
		onLoadFun() {
			this.getUserShippingAddressEvent();
		},
		getUserShippingAddressEvent() {
			getUserShippingAddress().then(res => {
				this.addressList = res.result.showing
				uni.stopPullDownRefresh()
			})
		},
		edit(row) {
			uni.setStorage({
				key: 'address',
				data: row,
				success() {
					uni.navigateTo({
						url: 'edit/edit?type=edit'
					});
				}
			});
		},
		add() {
			uni.navigateTo({
				url: 'edit/edit?type=add'
			});
		},
		select(row) {
			//是否需要返回地址(从订单确认页跳过来选收货地址)
			if (!this.isSelect) {
				return;
			}
			uni.setStorage({
				key: 'selectAddress',
				data: row,
				success() {
					uni.navigateBack();
				}
			});
		}
	}
};
</script>

<style lang="scss">
view {
	display: flex;
}
.app-container {
	position: relative;
}
.add {
	position: fixed;
	bottom: 36px;
	right: 0;
	width: 100%;
	height: 120upx;
	justify-content: center;
	align-items: center;
	.form-btn {
		width: 90%;
	}
}
.list {
	width: 100%;
	flex-wrap: wrap;
	justify-content: center;

	.row {
		width: 96%;
		padding: 20upx 2%;
		.left {
			width: 90upx;
			flex-shrink: 0;
			align-items: center;
			.head {
				width: 70upx;
				height: 70upx;
				background: linear-gradient(to right, #ccc, #aaa);
				color: #fff;
				justify-content: center;
				align-items: center;
				border-radius: 60upx;
				font-size: 35upx;
			}
		}
		.center {
			width: 100%;
			flex-wrap: wrap;
			.name-tel {
				width: 100%;
				align-items: baseline;
				.name {
					font-size: 24rpx;
				}
				.tel {
					margin-left: 30upx;
					font-size: 24upx;
					color: #777;
				}
				.default {
					font-size: 22upx;
					background-color: $uni-hover;
					color: #fff;
					padding: 0 18upx;
					border-radius: 24upx;
					margin-left: 20upx;
				}
			}
			.address {
				width: 100%;
				font-size: 24upx;
				align-items: baseline;
				color: #777;
			}
		}
		.right {
			flex-shrink: 0;
			align-items: center;
			margin-left: 20upx;
			.icon {
				justify-content: center;
				align-items: center;
				width: 80upx;
				height: 60upx;
				border-left: solid 1upx #aaa;
				font-size: 40upx;
				color: #777;
			}
		}
	}
}
</style>
